<template>
    <div class="select-flow-container">
        <validation-observer ref="observerRef">
            <el-form
                class="custom-form"
                label-position="right"
                :class="{ 'is-disabled': formType === 'query' }"
                :disabled="formType === 'query'"
                label-width="120px"
                ref="formRef"
            >
                <validation-provider
                    name="model.flowId"
                    :rules="'required'"
                    :customMessages="{ required: '请选择流程模板' }"
                    v-slot="{ errors }"
                    slim
                >
                    <el-form-item label="流程模板" required>
                        <div
                            class="cf__group"
                            :class="{ error: errors.length > 0 }"
                        >
                            <div class="cf__group-info">
                                <el-select v-model="model.flowId" @change="changeFlow" :disabled="_isReadOnly">
                                    <el-option v-for="(item, index) in flowList" :value="item.definitionId" :label="item.name" :key="index"></el-option>
                                </el-select>
                            </div>
                            <div class="cf__group-tips">
                                <template v-if="errors.length > 0">
                                    {{ errors[0] }}
                                </template>
                                <template v-else>
<!--                                    <span class="normal">没有可用流程?</span><el-link type="primary">前往创建</el-link>-->
                                </template>
                            </div>
                        </div>
                    </el-form-item>
                </validation-provider>
                <el-form-item label="流程描述">
                    <span class="description">{{ flowDescription || "暂无描述" }}</span>
                </el-form-item>
            </el-form>
        </validation-observer>
        <flow-chart :id="id" :isCheck="true" :readOnly="true" :isDetail="true" ref="flowChart"/>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import FlowChart from "@/views/process-manage/src/components/flow-chart/index.vue";


@Component({
    name: "SelectFlow",
    components: {
        FlowChart
    }
})
export default class SelectFlow extends Vue {
    @Prop({
        type: String,
        default: ""
    })
    readonly formType!: string;

    @Prop({
        type: String,
        default: ""
    })
    readonly processId!: string;

    @Prop({
        type: Boolean,
        default: true
    })
    readonly canEdit!: boolean;

    get _isReadOnly() {
        return this.$route.query.isDetail === '1' || this.$route.query.isSend === 'send' || !this.canEdit;
    }

    model: any = {
        flowId: ""
    }

    flowDescription = ""
    id: any = "";

    flowList: any[] = []

    created() {
        this.id = this.processId || this.$route.query.processId || "";
        this.getTable();
    }

    inPage() {
        const flow = this.flowList.filter((item: any) => item.definitionId === this.processId);
        if (flow.length) {
            this.model.flowId = flow[0].definitionId || "";
        }
        if (!this.model.flowId && this.flowList.length && this.$route.query.isDetail !== "1") {
            this.model.flowId = this.flowList[0].definitionId;
        }
    }

    // 选择流程
    changeFlow() {
        const flow = this.flowList.filter((item: any) => item.definitionId === this.model.flowId);
        if (flow.length) {
            this.id = flow[0].definitionId || "";
            this.flowDescription = flow[0].description || "";
        }
    }

    // 获取表格数据
    getTable() {
        this.$server["process/getTable"]({
            data: {
                pageSize: 99999,
                currentPage: 1
            }
        }).then((res: any) => {
            if (res.data.code === 200) {
                this.flowList = res.data.data.records;
                this.inPage();
                this.changeFlow();
            } else {
                this.$message.error(res.data.message);
            }
        }).catch();
    }

    async sure(c: any) {
        const observerRef: any = this.$refs.observerRef;
        const validateResult: any = await observerRef.validate();

        if (validateResult) {
            const cur = this.flowList.filter((item: any) => item.definitionId === this.model.flowId);
            c(this.model.flowId, cur);
        }
    }
}
</script>

<style lang="scss" scoped>
.select-flow-container {
    background: #fff;
    height: 100%;

    .custom-form {
        width: 780px;
        margin: 0 auto;
        padding-top: 44px;
    }
    ::v-deep {
        .cf__group {
            padding-bottom: 20px;
            .cf__group-tips {
                line-height: 20px;
                height: 20px;
            }
        }
        .flow-chart-container {
            background: #fff;
            height: calc(100% - 174px);
            .canvas-container {
                margin: 0 auto;
            }
        }
    }
}
</style>
<style lang="scss">
.readOnly .select-flow-container {
    padding-top: 74px;
}
</style>
